<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<style>
    tr td {
        padding: 10px;
        margin: 10px
    }

    th {
        text-align: center
    }

    input[type='number'] {
        width: 100px;
        height: 30px
    }
</style>
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <table id="exampleTable" data-mobile-responsive="true">
                </table>
                <form class="form-horizontal m-t" id="signupForm">
                    <input id="totalScore" type="hidden" th:value="${totalScore}" class="form-control">
                    <input id="tptemplateId" type="hidden" name="tptemplateId" th:value="${tptemplateId}"
                           class="form-control">
                    <input id="type" type="hidden" th:value="${type}" class="form-control">
                    <input id="titleNumber" type="hidden" th:value="${titleNumber}" class="form-control">
                    <input id="score" type="hidden" th:value="${score}" class="form-control">
                    <table class="layui-table" th:each="item,itemState : ${resultMap}">
                        <div th:text="${item.key}" style="font-size: 20px;font-weight: bold"></div>
                        <thead>
                        <tr>
                            <!--<th></th>-->
                            <th>知识点</th>
                            <th>题库类型</th>
                            <th>题型</th>
                            <th>题目数量(道)</th>
                            <th>分值(分)</th>
                                                        <th>题库数量</th>
                            <th>题型</th>
                            <th>题目数量(道)</th>
                            <th>分值(分)</th>
                                                        <th>题库数量</th>
                            <th>题型</th>
                            <th>题目数量(道)</th>
                            <th>分值(分)</th>
                            <th>题库数量</th>
                            <th>总分值(分)</th>
                        </tr>
                        </thead>
                        <tbody th:id="${'content'+itemState.index}" class="contentClass">
                        <tr style="background-color: #efefef" th:each="itemItem : ${item.value}">
                            <td th:text="${itemItem.name}" style="width: 200px"></td>
                            <td style="display: none"><input type="hidden" name="kpointsId" th:value="${itemItem.id}"/>
                            </td>
                            <td><input type="hidden" name="itemBankType" value="1"/>练习题库</td>
                            <td><input type="hidden" name="type" value="0"/>单选题</td>
                            <td><input type="number" class="titleNumberE" name="titleNumber"
                                       placeholder="请输入数量" th:value="${itemItem.singleNum0}"/></td>
                            <td><input type="number" class="scoreNumberE" name="score" placeholder="请输入分值"
                                       th:value="${itemItem.singleNum0Score}"/></td>
                            <td th:text="${itemItem.singleNum2?: 0}"></td>
                            <td><input type="hidden" name="type" value="1"/>多选题</td>
                            <td><input type="number" class="titleNumberE" name="titleNumber"
                                       placeholder="请输入数量" th:value="${itemItem.multipleNum0}"/></td>
                            <td><input type="number" class="scoreNumberE" name="score" placeholder="请输入分值"
                                       th:value="${itemItem.multipleNum0Score}"/></td>
                            <td th:text="${itemItem.multipleNum2?: 0}"></td>
                            <td><input type="hidden" name="type" value="2"/>判断题</td>
                            <td><input type="number" class="titleNumberE" name="titleNumber"
                                       placeholder="请输入数量" th:value="${itemItem.judgeNum0}"/></td>
                            <td><input type="number" class="scoreNumberE" name="score" placeholder="请输入分值"
                                       th:value="${itemItem.judgeNum0Score}"/></td>
                            <td th:text="${itemItem.judgeNum2 ?: 0}"></td>
                            <td class="scores" style="font-weight: bold;font-size: 16px"></td>
                        </tr>
                        </tbody>
                        <tr>

                        </tr>
                        <tr>
                            <td colspan="11" align="center"></td>
                        </tr>
                    </table>
                    <div style="display: flex; width: 100%;justify-content: space-evenly;align-items: center; flex-direction: column;">
                        <div style="display: flex">
                            <div style="font-size: 22px">总分值：</div>
                            <div style="font-size: 22px" id="alls"></div>
                        </div>
                        <button type="submit" class="btn btn-primary" style="width: 200px">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<!--<script type="text/javascript" src="/js/webJs/jzweb/templateDetails/templateDetails.js"></script>-->
<script>
    $.validator.setDefaults({
        submitHandler: function () {
            update();
        }
    });

    //拆分数组
    function group(array, subGroupLength) {
        var index = 0;
        var newArray = [];
        while (index < array.length) {
            newArray.push(array.slice(index, index += subGroupLength));
        }
        return newArray;
    }

    $(document).ready(function () {
        // 计算并更新一行的分数
        function updateRowScore(row) {
            var totalScore = 0;
            row.find('.titleNumberE').each(function () {
                var quantity = parseInt($(this).val(), 10) ? parseInt($(this).val(), 10) : 0;
                var score = parseInt($(this).closest('td').next().find('.scoreNumberE').val(), 10) ? parseInt($(this).closest('td').next().find('.scoreNumberE').val(), 10) : 0;
                totalScore += quantity * score;
            });
            row.find('.scores').text(totalScore);
            evaluate()
        }

        // 初始计算所有行的分数
        $('.contentClass tr').each(function () {
            updateRowScore($(this));
        })
        // $('#content tr').each(function () {
        //     updateRowScore($(this));
        // });

        // 监听数量和分值输入框的变化，实时计算并更新分数
        $('.contentClass').on('input', '.titleNumberE, .scoreNumberE', function () {
            var row = $(this).closest('tr');
            updateRowScore(row);
        });
        // $('#content').on('input', '.titleNumberE, .scoreNumberE', function () {
        //     var row = $(this).closest('tr');
        //     updateRowScore(row);
        // });


        // $('#content').on('input', '.titleNumberE, .scoreNumberE', function () {
        //     var row = $(this).closest('tr');
        //     updateRowScore(row);
        // });
    });
    $(function () {
        validateRule();
    });

    // 计算总共总分值
    function evaluate() {
        var subjectAll = '';
        $('.scores').each(function (i, res) {
            var numberT = $(this).html();
            subjectAll = numberT * 1 + subjectAll * 1;
        });
        $("#alls").text(subjectAll);
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i>";
        $("#signupForm").validate({
            rules: {
                score: {
                    digits: true
                },
                titleNumber: {
                    digits: true
                }
            },
            messages: {}
        })
    }

    function update() {
        if (parseInt($("#alls").text()) != parseInt($("#totalScore").val())) {
            layer.msg("总分值应等于试卷模板总分" + $("#totalScore").val() + "分，请重新填写！");
            return false
        }
        $.ajax({
            cache: true,
            type: "POST",
            url: "/jzweb/eventResourceTemplateDetails/update",
            data: $('#signupForm').serialize(),// 你的formid
            async: false,
            error: function (request) {
                parent.layer.alert("Connection error");
            },
            success: function (data) {
                if (data.code == 0) {
                    parent.layer.msg("操作成功");
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);

                } else {
                    parent.layer.alert(data.msg)
                }
            }
        });

    }
</script>
</body>
</html>